<%@ page pageEncoding="UTF-8" %>
<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" rel="stylesheet">
    <title>随便打TCS系统</title>
</head>

<body class="nav-md">
<div>
    <div class="container-fluid" style="padding-left: 235px">
        <div>
            <div id="toolbar" class="btn-group">
                <div class="row">
                    <div class="col-14" style="margin-left: 15px">
                        <form class="form-inline" id="formSelect">
                            <div class="form-group mb-2">
                                <input type="text" class="form-control" id="commodityNameSelect" placeholder="商品名称">
                            </div>
                            <div class="form-group mb-2">
                                <select class="form-control" id="commoditySubareaSelect">
                                    <option value="" selected:disabled style="diaplay:none">商品分区</option>
<%--                                    <option value="1">积分区</option>--%>
                                    <option value="0">奖励金区</option>
<%--                                    <option value="2">金豆区</option>--%>
                                </select>
                            </div>
                            <div class="form-group mb-2">
                                <select class="selectpicker form-control" id="commodityClassifyLevel1Select" data-max-options="1"
                                        data-live-search ="true" title="请选择商品一级分类">
                                </select>
                            </div>
                            <div class="form-group mb-2">
                                <button type="button" id="search" class="btn btn-success">查询</button>
                                <button type="reset" id="reset" class="btn btn-danger">重置</button>
                            </div>
                        </form>
                    </div>
                    <div class="col-14" style="margin-left: 20px">
                        <button type="button" class="btn btn-primary" data-toggle="modal" id="addModal">
                            新增
                        </button>
                    </div>
                </div>
            </div>
            <table id="table"></table>
        </div>

        <!-- 新增 -->
        <div class="modal fade" id="addShow" tabindex="-1" role="dialog" aria-labelledby="addShowTitle">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="addShowTitle">新增商品</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <form id="formAdd">
                            <div class="form-row">
                                <div class="form-group " style="width: 100%">
                                    <input type="text" class="form-control" id="commodityNameAdd" placeholder="请输入商品名称"/>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="commodityRealPriceAdd" placeholder="请输入实付价">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="commodityMarketPriceAdd" placeholder="请输入市场价">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="commodityStandardAdd" placeholder="请输入规格，多个请按/隔开">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="commodityStockAdd" placeholder="请输入库存">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <select class="selectpicker form-control" id="commodityClassifyLevel1Add" data-max-options="1"
                                            data-live-search ="true" title="请选择商品一级分类">
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <select class="selectpicker form-control" id="commodityClassifyLevel2Add" data-max-options="1"
                                            data-live-search ="true" title="请选择商品二级分类">
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="expirationHourAdd" placeholder="请输入拼团过期时间(小时默认48)">
                                </div>
                                <div class="form-group col-md-6">
                                    <select class="selectpicker form-control" id="callPlanAdd" data-max-options="1"
                                            data-live-search ="true" title="请选择话费礼包">
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group" style="width: 100%;">
                                    <select class="form-control" id="commoditySubareaAdd">
                                        <option value="" selected:disabled style="diaplay:none">请选择商品分区</option>
                                        <option value="1">积分区</option>
                                        <option value="0">奖励金区</option>
                                        <option value="2">金豆区</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group" style="width: 100%;">
                                    <label for="commoditySubareaUpdate">商品状态：</label>
                                    <select class="form-control" id="commodityBuyAdd">
                                        <option value="" selected:disabled style="diaplay:none">请选择商品状态</option>
                                        <option value="1">可被购买</option>
                                        <option value="0">仅展示</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <input type="text" hidden class="form-control" id="commodityShowPicSrcAdd"/>
                                <label for="commodityShowPicAdd">商品展示图片：</label>
                                <div class="form-group" style="width: 100%;">
                                    <input id="commodityShowPicAdd" type="file" name="file">
                                </div>
                            </div>
                            <div class="form-row">
                                <input type="text" hidden class="form-control" id="commoditySlidePic1SrcAdd"/>
                                <label for="commoditySlidePic1Add">商品轮播图1：</label>
                                <div class="form-group" style="width: 100%;">
                                    <input id="commoditySlidePic1Add" type="file" name="file">
                                </div>
                            </div>
                            <div class="form-row">
                                <input type="text" hidden class="form-control" id="commoditySlidePic2SrcAdd"/>
                                <label for="commoditySlidePic2Add">商品轮播图2：</label>
                                <div class="form-group" style="width: 100%;">
                                    <input id="commoditySlidePic2Add" type="file" name="file">
                                </div>
                            </div>
                            <div class="form-row">
                                <input type="text" hidden class="form-control" id="commoditySlidePic3SrcAdd"/>
                                <label for="commoditySlidePic3Add">商品轮播图3：</label>
                                <div class="form-group" style="width: 100%;">
                                    <input id="commoditySlidePic3Add" type="file" name="file">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group" style="width: 100%;">
                                    <label for="commodityExplainAdd">说明：</label>
                                    <textarea placeholder="请输入说明" class="form-control" id="commodityExplainAdd"
                                              rows="3"></textarea>
                                </div>
                            </div>
                            <div class="form-row">
                                <label for="commodityContextDetailsAdd">商品详情：</label>
                                <div class="form-group" style="width: 100%;">
                                    <textarea class="form-control" id="commodityContextDetailsAdd" rows="3"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button id="addPost" type="button" class="btn btn-primary">新增</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 修改 -->
        <div class="modal fade" id="updateShow" tabindex="-1" role="dialog" aria-labelledby="updateShowTitle">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="updateShowTitle">修改商品</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <form id="formUpdate">
                            <input type="text" hidden class="form-control" id="idUpdate"/>
                            <div class="form-row">
                                <div class="form-group" style="width: 100%">
                                    <label for="commodityNameUpdate">商品名称：</label>
                                    <input type="text" class="form-control" id="commodityNameUpdate" placeholder="请输入商品名称">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="commodityRealPriceUpdate">实付价：</label>
                                    <input type="text" class="form-control" id="commodityRealPriceUpdate" placeholder="请输入实付价">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="commodityMarketPriceUpdate">市场价：</label>
                                    <input type="text" class="form-control" id="commodityMarketPriceUpdate" placeholder="请输入市场价">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="commodityStandardUpdate">商品规格：</label>
                                    <input type="text" class="form-control" id="commodityStandardUpdate" placeholder="请输入规格，多个请按/隔开">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="commodityStockUpdate">商品库存：</label>
                                    <input type="text" class="form-control" id="commodityStockUpdate" placeholder="请输入库存">
                                </div>
                            </div>
                            <div class="form-row" style="width: 100%;">
                                <div class="form-group col-md-6">
                                    <label for="commoditySalesUpdate">商品销量：</label>
                                    <input type="text" class="form-control" id="commoditySalesUpdate" placeholder="请输入商品销量">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="expirationHourUpdate" style="display: block">拼团过期时间：</label>
                                    <input type="text" class="form-control" id="expirationHourUpdate" placeholder="请输入拼团过期时间(小时默认48)">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="callPlanUpdate" style="display: block">话费礼包：</label>
                                    <div class="form-group">
                                        <select class="selectpicker form-control" id="callPlanUpdate" data-max-options="1"
                                                data-live-search ="true" title="请选择话费礼包">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="commodityClassifyLevel1Update" style="display: block">商品一级分类：</label>
                                    <div class="form-group">
                                        <select class="selectpicker form-control" id="commodityClassifyLevel1Update" data-max-options="1"
                                                data-live-search ="true" title="请选择商品一级分类">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="commodityClassifyLevel2Update" style="display: block">商品二级分类：</label>
                                    <div class="form-group">
                                        <select class="selectpicker form-control" id="commodityClassifyLevel2Update" data-max-options="1"
                                                data-live-search ="true" title="请选择商品二级分类">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group" style="width: 100%;">
                                    <label for="commoditySubareaUpdate">商品分区：</label>
                                    <select class="form-control" id="commoditySubareaUpdate">
                                        <option value="" selected:disabled style="diaplay:none">请选择商品分区</option>
                                        <option value="1">积分区</option>
                                        <option value="0">奖励金区(拼团)</option>
                                        <option value="2">金豆区</option>
                                    </select>
                                </div>
                            </div>
                             <div class="form-row">
                                <div class="form-group" style="width: 100%;">
                                    <label for="commoditySubareaUpdate">商品状态：</label>
                                    <select class="form-control" id="commodityBuyUpdate">
                                        <option value="" selected:disabled style="diaplay:none">请选择商品状态</option>
                                        <option value="1">可被购买</option>
                                        <option value="0">仅展示</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <input type="text" hidden class="form-control" id="commodityShowPicSrcUpdate"/>
                                <label for="commodityShowPicUpdate">商品展示图片：</label>
                                <div class="form-group" style="width: 100%;">
                                    <input id="commodityShowPicUpdate" type="file" name="file">
                                </div>
                            </div>
                            <div class="form-row">
                                <input type="text" hidden class="form-control" id="commoditySlidePic1SrcUpdate"/>
                                <label for="commoditySlidePic1Update">商品轮播图1：</label>
                                <div class="form-group" style="width: 100%;">
                                    <input id="commoditySlidePic1Update" type="file" name="file">
                                </div>
                            </div>
                            <div class="form-row">
                                <input type="text" hidden class="form-control" id="commoditySlidePic2SrcUpdate"/>
                                <label for="commoditySlidePic2Update">商品轮播图2：</label>
                                <div class="form-group" style="width: 100%;">
                                    <input id="commoditySlidePic2Update" type="file" name="file">
                                </div>
                            </div>
                            <div class="form-row">
                                <input type="text" hidden class="form-control" id="commoditySlidePic3SrcUpdate"/>
                                <label for="commoditySlidePic3Update">商品轮播图3：</label>
                                <div class="form-group" style="width: 100%;">
                                    <input id="commoditySlidePic3Update" type="file" name="file">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group" style="width: 100%;">
                                    <label for="commodityExplainUpdate">说明：</label>
                                    <textarea placeholder="请输入说明" class="form-control" id="commodityExplainUpdate"
                                              rows="3"></textarea>
                                </div>
                            </div>
                            <div class="form-row">
                                <label for="commodityContextDetailsUpdate">商品详情：</label>
                                <div class="form-group" style="width: 100%;">
                                    <textarea class="form-control" id="commodityContextDetailsUpdate" rows="3"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="updatePost">修改</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 详情 -->
        <div class="modal fade" id="detailShow" tabindex="-1" role="dialog" aria-labelledby="detailShowTitle">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="detailShowTitle">商品详情</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <form id="formDetail">
                            <div class="form-row">
                                <label for="commodityStandardDetail">商品规格：</label>
                                <div class="form-group" style="width: 100%;">
                                    <input type="text" class="form-control" id="commodityStandardDetail" readonly>
                                </div>
                            </div>
                            <div class="form-row">
                                <label for="commodityStockDetail">商品库存：</label>
                                <div class="form-group" style="width: 100%;">
                                    <input type="text" class="form-control" id="commodityStockDetail" readonly>
                                </div>
                            </div>
                            <div class="form-row">
                                <label for="expirationHourDetail">拼团过期时间：</label>
                                <div class="form-group" style="width: 100%;">
                                    <input type="text" class="form-control" id="expirationHourDetail" readonly>
                                </div>
                            </div>
                            <div class="form-row" style="display: grid">
                                <label for="callPlanDetail">话费礼包：</label>
                                <div class="form-group" style="width: 100%;">
                                    <select disabled class="selectpicker form-control" id="callPlanDetail" data-max-options="1"
                                            data-live-search ="true" title="请选择话费礼包">
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <label for="commodityShowPicDetail">商品展示图片：</label>
                                <div class="form-group" style="width: 100%;">
                                    <img alt="..." class="rounded" id="commodityShowPicDetail" style="width: 100%;">
                                </div>
                            </div>
                            <div class="form-row">
                                <label for="commoditySlidePic1Detail">商品轮播图1：</label>
                                <div class="form-group" style="width: 100%;">
                                    <img alt="..." class="rounded" id="commoditySlidePic1Detail" style="width: 100%;">
                                </div>
                            </div>
                            <div class="form-row">
                                <label for="commoditySlidePic2Detail">商品轮播图2：</label>
                                <div class="form-group" style="width: 100%;">
                                    <img alt="..." class="rounded" id="commoditySlidePic2Detail" style="width: 100%;">
                                </div>
                            </div>
                            <div class="form-row">
                                <label for="commoditySlidePic3Detail">商品轮播图3：</label>
                                <div class="form-group" style="width: 100%;">
                                    <img alt="..." class="rounded" id="commoditySlidePic3Detail" style="width: 100%;">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group" style="width: 100%;">
                                    <label for="commodityExplainDetail">说明：</label>
                                    <textarea readonly class="form-control" id="commodityExplainDetail" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="form-row">
                                <label for="commodityContextDetailsDetails">商品详情：</label>
                                <div class="form-group" style="width: 100%;">
                                    <textarea readonly class="form-control" id="commodityContextDetailsDetails" rows="3"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.15.3/locale/bootstrap-table-zh-CN.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.10/js/i18n/defaults-zh_CN.min.js"></script>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/purify.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.2/js/locales/zh.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.2/js/locales/fa.min.js"></script>
</html>
<script>
    $(function () {
        $(document).ajaxComplete(function (event, xhr, settings) {
            let url = xhr.getResponseHeader("redirectUrl");

            let enable = xhr.getResponseHeader("enableRedirect");

            if((enable === "true") && (url !== "")){
                let win = window;
                while(win !== win.top){
                    win = win.top;
                }
                win.location.href = url;
            }
        })
        initSelectData(0, "commodityClassifyLevel1Select", true)
        Date.prototype.Format = function (fmt) {
            const o = {
                "M+": this.getMonth() + 1,
                "d+": this.getDate(),
                "h+": this.getHours(),
                "m+": this.getMinutes(),
                "s+": this.getSeconds(),
                "q+": Math.floor((this.getMonth() + 3) / 3),
                "S": this.getMilliseconds()
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (let k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };

        $("#reset").click(function () {
            let obj = $("#commodityClassifyLevel1Select")
            obj.text('')
            obj.selectpicker('deselectAll');
            initSelectData(0, "commodityClassifyLevel1Select", true)
            obj.selectpicker('refresh');
            obj.selectpicker('render');

        })

        // 文件上传参数
        const fileInputOption = {
            language: 'zh',
            browseOnZoneClick: true,
            allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg'],
            uploadUrl: '/SbdVoip/layfile/uploadFile1',
            // 是否显示上传按钮
            showUpload: true,
            // 显示移除按钮
            showRemove: false,
            // 是否显示预览
            showPreview: true,
            // 是否显示拖拽区域
            dropZoneEnabled: true,
            // 是否显示文件标题
            showCaption: false,
            minFileCount: 1,
            maxFileCount: 1,
            removeFromPreviewOnError: true,
            layoutTemplates: {
                actionZoom: '<button type="button" class="kv-file-zoom {zoomClass} bi bi-zoom-in" title="{zoomTitle}"><i class="fa fa-search-plus"></i></button>',
                actionDelete: '',
                actionUpload: '',
                actionDrag: '',
                modalMain: '<div id="kvFileinputModal" role="dialog" class="file-zoom-dialog modal fade" tabindex="-1" aria-labelledby="kvFileInputModalLabel"></div>',
                modal: '<div class="modal-dialog modal-lg" role="document">' +
                    '  <div class="modal-content">' +
                    '    <div class="modal-header">' +
                    '      <h3 class="modal-title" id="kvFileInputModalLabel">{heading} <small><span class="kv-zoom-title"></span></small></h3>' +
                    '      <div class="kv-zoom-actions">' +
                    '           <button type="button" class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-toggleheader" title="缩放" data-toggle="button" aria-pressed="false" autocomplete="off">' +
                    '               <i class="fas fa-compress-arrows-alt"></i>' +
                    '           </button>' +
                    '           <button type="button" class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-fullscreen" title="全屏" data-toggle="button" aria-pressed="false" autocomplete="off">' +
                    '               <i class="fas fa-expand"></i>' +
                    '           </button>' +
                    '           <button type="button" class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-borderless" title="无边界模式" data-toggle="button" aria-pressed="true" autocomplete="off">' +
                    '               <i class="fas fa-compress"></i>' +
                    '           </button>' +
                    '           <button type="button" id="close-kv-zoom-actions" class="btn btn-sm btn-kv btn-default btn-outline-secondary" data-dismiss="modal" title="关闭当前预览">' +
                    '               <i class="fas fa-times"></i>' +
                    '           </button>' +
                    '      </div>' +
                    '    </div>' +
                    '    <div class="modal-body">' +
                    '      <div class="floating-buttons"></div>' +
                    '      <div class="kv-zoom-body file-zoom-content"></div>' + '{prev} {next}' +
                    '    </div>' +
                    '  </div>' +
                    '</div>'
            }
        };

        addImg([], fileInputOption, "commodityShowPicAdd", "commodityShowPicSrcAdd");
        addImg([], fileInputOption, "commoditySlidePic1Add", "commoditySlidePic1SrcAdd");
        addImg([], fileInputOption, "commoditySlidePic2Add", "commoditySlidePic2SrcAdd");
        addImg([], fileInputOption, "commoditySlidePic3Add", "commoditySlidePic3SrcAdd");

        function addImg(srcArray, fileInputOption, objStr, objSrcStr){
            $("#" + objStr).fileinput(fileInputOption).on('fileuploaded', function (event, data, previewId, index) {
                if (data.response.code !== 0) {
                    toastr.error(data.response.msg);
                    return
                }
                $('#' + objSrcStr).val(data.response.data.src);
                $("[id='" + previewId + "'] .kv-file-content img").attr('src', data.response.data.src);
                toastr.success(data.response.msg);
            });
        }

        $("#kvFileinputModal").on("hidden.bs.modal", function () {
            $("body").attr("class", "modal-open");
        });

        function updateImg(srcArray, fileInputOption, objStr, objSrcStr){
            var obj = $("#" + objStr);
            obj.fileinput('destroy');
            var fileInputOption1 = fileInputOption;
            fileInputOption1.initialPreviewAsData = true;
            fileInputOption1.initialPreviewFileType = 'image';
            fileInputOption1.initialPreview = srcArray;
            obj.fileinput(fileInputOption1).on('fileuploaded', function (event, data, previewId, index) {
                if (data.response.code !== 0) {
                    toastr.error(data.response.msg);
                    return
                }
                $('#' + objSrcStr).val(data.response.data.src);
                $("[id='" + previewId + "'] .kv-file-content img").attr('src', data.response.data.src);
                toastr.success(data.response.msg);
            });
        }

        $("#addModal").click(function () {
            $('#formAdd')[0].reset()
            $("[textarea='commodityContextDetailsAdd']").contents().find("body").html('');
            initSelectData(0, "commodityClassifyLevel1Add", true)
            initCallPlanSelectData({}, "callPlanAdd", true)
            $('#addShow').modal('show')
        });

        function initCallPlanSelectData(data, objStr, async) {
            $.ajax({
                url : "/SbdVoip/admin/commodityCallPlan/getCallPlanSelectData",
                type : "POST",
                data: data,
                dataType: "json",
                async: async,
                contentType: "application/x-www-form-urlencoded",
                success : function(result) {
                    if (result.code !== 2000) {
                        toastr.error(result.message);
                        return
                    }
                    let data = result.data;
                    let obj = $('#' + objStr);
                    let html = '<option data-tokens="' + 0 + '" ' +
                        'value="' + 0 + '" style="color: #7c868f">' + '请选择话费礼包' + '</option>';
                    for (let i = 0; i < data.length; i++) {
                        html += '<option data-tokens="' + data[i].id + '" ' +
                            'value="' + data[i].id + '">' + data[i].planName + '</option>';
                    }
                    obj.html(html);
                    obj.selectpicker('refresh');
                    obj.selectpicker('render');
                }
            });
        }

        function initSelectData(classifyPid, objStr, async){
            $.ajax({
                url : "/SbdVoip/admin/commodityClassify/getClassifyPidSelectData",
                type : "POST",
                data: {classifyPid: classifyPid},
                dataType: "json",
                async: async,
                contentType: "application/x-www-form-urlencoded",
                success : function(result) {
                    if (result.code !== 2000) {
                        toastr.error(result.message);
                        return
                    }
                    let data = result.data;
                    let obj = $('#' + objStr);
                    let html = '<option data-tokens="' + 0 + '" ' +
                        'value="' + 0 + '" style="color: #7c868f">' + '请选择商品分类' + '</option>';
                    for (let i = 0; i < data.length; i++) {
                        html += '<option data-tokens="' + data[i].id + '" ' +
                            'value="' + data[i].id + '">' + data[i].classifyName + '</option>';
                    }
                    obj.html(html);
                    obj.selectpicker('refresh');
                    obj.selectpicker('render');
                }
            });
        }

        window.operateEvents = {
            "click #showUpdateId": function (e, value, row, index) {
                $('#formUpdate')[0].reset() ;
                initSelectData(0, "commodityClassifyLevel1Update", false)
                initSelectData(row.commodityClassifyLevel1, "commodityClassifyLevel2Update", false)
                initCallPlanSelectData({}, "callPlanUpdate", false)
                $('#idUpdate').val(row.id);
                $('#commodityNameUpdate').val(row.commodityName);
                $('#commodityRealPriceUpdate').val(row.commodityRealPrice);
                $('#commodityMarketPriceUpdate').val(row.commodityMarketPrice);
                $('#commodityStockUpdate').val(row.commodityStock);
                $('#commodityStandardUpdate').val(row.commodityStandard);
                $('#expirationHourUpdate').val(row.expirationHour);
                $('#commoditySalesUpdate').val(row.commoditySales);


                $('#commodityClassifyLevel1Update').selectpicker('val', row.commodityClassifyLevel1);
                $('#commodityClassifyLevel2Update').selectpicker('val', row.commodityClassifyLevel2);
                $('#callPlanUpdate').selectpicker('val', row.callPlan);

                $("#commoditySubareaUpdate option[text='jQuery']").attr("selected", true);
                $('#commoditySubareaUpdate').val(row.commoditySubarea);
                $('#commodityExplainUpdate').val(row.commodityExplain);
                $('#commodityShowPicSrcUpdate').val(row.commodityShowPic);
                $('#commoditySlidePic1SrcUpdate').val(row.commoditySlidePic1);
                $('#commoditySlidePic2SrcUpdate').val(row.commoditySlidePic2);
                $('#commoditySlidePic3SrcUpdate').val(row.commoditySlidePic3);


                updateImg([ row.commodityShowPic ], fileInputOption, "commodityShowPicUpdate", "commodityShowPicSrcUpdate");
                updateImg([ row.commoditySlidePic1 ], fileInputOption, "commoditySlidePic1Update", "commoditySlidePic1SrcUpdate");
                updateImg([ row.commoditySlidePic2 ], fileInputOption, "commoditySlidePic2Update", "commoditySlidePic2SrcUpdate");
                updateImg([ row.commoditySlidePic3 ], fileInputOption, "commoditySlidePic3Update", "commoditySlidePic3SrcUpdate");

                layui.use('layedit', function() {
                    var layedit = layui.layedit;
                    layedit.set(layEditOption);
                    layedit.build('commodityContextDetailsUpdate');
                    $("[textarea='commodityContextDetailsUpdate']").contents().find("body").html(row.commodityContextDetails);
                });
                $('#updateShow').modal('show');
            },
            "click #showDeleteId": function (e, value, row, index) {
                $.ajax({
                    url: "/SbdVoip/admin/commodity/commodityWebDelete",
                    type: "POST",
                    data: {id: row.id, isDel: row.isDel === 0 ? 1 : 0},
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded",
                    success: function (result) {
                        if (result.code !== 2000) {
                            toastr.error(result.message);
                            return
                        }
                        var table = $('#table');
                        table.bootstrapTable('destroy');
                        table.bootstrapTable(bootstrapTable);
                        toastr.success(result.message);
                    }
                });
            },
            "click #showDetailId": function (e, value, row, index) {
                $('#detailShow').modal('show');
                $('#commodityStandardDetail').val(row.commodityStandard);
                $('#commodityStockDetail').val(row.commodityStock);
                $('#commodityExplainDetail').val(row.commodityExplain);
                $('#expirationHourDetail').val(row.expirationHour);
                initCallPlanSelectData({}, "callPlanDetail", false)
                $('#callPlanDetail').selectpicker('val', row.callPlan);
                $('#commodityShowPicDetail').attr("src", row.commodityShowPic);
                $('#commoditySlidePic1Detail').attr("src", row.commoditySlidePic1);
                $('#commoditySlidePic2Detail').attr("src", row.commoditySlidePic2);
                $('#commoditySlidePic3Detail').attr("src", row.commoditySlidePic3);
                layui.use('layedit', function () {
                    var layedit = layui.layedit;
                    layedit.set(layEditOption);
                    layedit.build('commodityContextDetailsDetails');
                    $("[textarea='commodityContextDetailsDetails']").contents().find("body").html(row.commodityContextDetails);
                });

            },
            "click #showReferrerId": function (e, value, row, index) {
                $.ajax({
                    url: "/SbdVoip/admin/commodityReferrer/commodityReferrerWebAdd",
                    type: "POST",
                    data: {id: row.id},
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded",
                    success: function (result) {
                        if (result.code !== 2000) {
                            toastr.error(result.message);
                            return
                        }
                        var table = $('#table');
                        table.bootstrapTable('destroy');
                        table.bootstrapTable(bootstrapTable);
                        toastr.success(result.message);
                    }
                });
            }
        };

        function actionFormatter(value, row, index) {
            let isDelName = "下架";
            if (row.isDel === 1) {
                isDelName = "上架";
            }
            return [
                '<button id="showReferrerId" type="button" class="btn btn-info">推荐</button>',
                '<button id="showDetailId" type="button" class="btn btn-info">详情</button>',
                '<button id="showUpdateId" type="button" class="btn btn-warning">修改</button>',
                '<button id="showDeleteId" type="button" class="btn btn-danger">'+ isDelName +'</button>'
            ].join('');
        }

        function commoditySubareaFormatter(value, row, index) {
            if (value === 1) {
                return '<p class="text-info">积分区</p>';
            }
            if (value === 0) {
                return '<p class="text-info">奖励金区</p>';
            }
            if (value === 2) {
                return '<p class="text-info">金豆区</p>';
            }
        }

        function formatDate(value, row, index) {
            return new Date(parseInt(value)).Format("yyyy-MM-dd hh:mm:ss");
        }

        const columns = [
            // {checkbox: true, 'data-halign': 'center', width: 50},
            {field: 'id', title: '商品编号', align: 'left', width: 150},
            {field: 'commodityName', title: '商品名称', align: 'left', width: 300},
            {field: 'createTime', title: '创建时间', align: 'left', width: 272, formatter: formatDate},
            {field: 'commodityRealPrice', title: '实付价', align: 'left', width: 150},
            {field: 'commodityMarketPrice', title: '市场价', align: 'left', width: 150},
            {field: 'commoditySales', title: '销量', align: 'left', width: 150},
            {field: 'commodityClassifyLevelName1', title: '商品一级分类', align: 'left', width: 150},
            {field: 'commodityClassifyLevelName2', title: '商品二级分类', align: 'left', width: 150},
            {field: 'commoditySubarea', title: '商品分区', align: 'left', width: 120, formatter: commoditySubareaFormatter},
            {title: '操作', align: 'center', formatter: actionFormatter, events: operateEvents, width: 500}
        ];
        const bootstrapTable = {
            url: '/SbdVoip/admin/commodity/commodityWebList',
            pagination: true,
            toolbar: '#toolbar',
            smartDisplay: false,
            showRefresh: true,
            height: $(window).height(),
            method: 'post',
            pageList: "[10, 15, 20]",
            search: false,
            contentType: 'application/x-www-form-urlencoded',
            dataType: 'json',
            sidePagination: 'server',
            pageNumber: 1,
            pageSize: 10,
            onlyInfoPagination: false,
            striped: true,
            columns: columns,
            onPostHeader: function () {
                $('#tableId').bootstrapTable('resetView');
            },
            queryParams: function (params) {
                return {
                    offset: (params.offset / params.limit) + 1,
                    limit: params.limit
                };
            },
            responseHandler: function (res) {
                if (res.code !== 2000) {
                    toastr.error(res.message);
                    return {
                        total: 0,
                        rows: []
                    }
                }
                return {
                    total: res.data.total,
                    rows: res.data.rows
                }
            }
        };
        $('#table').bootstrapTable(bootstrapTable);
        $('#search').click(function () {
            const commodityName = $('#commodityNameSelect').val();
            const commoditySubarea = $("#commoditySubareaSelect").find("option:selected").val();
            const commodityClassifyLevel1 = $("#commodityClassifyLevel1Select").find("option:selected").val();
            bootstrapTable.queryParams = function (params) {
                return {
                    offset: (params.offset / params.limit) + 1,
                    limit: params.limit,
                    commodityName: commodityName,
                    commoditySubarea: commoditySubarea,
                    commodityClassifyLevel1: commodityClassifyLevel1
                };
            };
            const table = $('#table');
            table.bootstrapTable('destroy');
            table.bootstrapTable(bootstrapTable);
        });

        $('#commodityClassifyLevel1Add').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
            const commodityClassifyLevel1 = $("#commodityClassifyLevel1Add").find("option:selected").val();
            initSelectData(commodityClassifyLevel1, "commodityClassifyLevel2Add", true)
        });

        $('#commodityClassifyLevel1Update').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
            if (clickedIndex !== null && isSelected !== null) {
                const commodityClassifyLevel1 = $("#commodityClassifyLevel1Update").find("option:selected").val();
                initSelectData(commodityClassifyLevel1, "commodityClassifyLevel2Update", true)
            }
        });

        $("#addPost").click(function () {
            const commodityContextDetailsAddObj = $("[textarea='commodityContextDetailsAdd']")
            imagesLayEdit(commodityContextDetailsAddObj);
            const data = {
                commodityName: $('#commodityNameAdd').val(),
                commodityRealPrice: $('#commodityRealPriceAdd').val(),
                commodityMarketPrice: $('#commodityMarketPriceAdd').val(),
                commodityStandard: $('#commodityStandardAdd').val(),
                commodityStock: $('#commodityStockAdd').val(),
                commodityClassifyLevel1: $("#commodityClassifyLevel1Add").find("option:selected").val(),
                commodityClassifyLevel2: $("#commodityClassifyLevel2Add").find("option:selected").val(),
                commoditySubarea: $("#commoditySubareaAdd").find("option:selected").val(),
                commodityShowPic: $('#commodityShowPicSrcAdd').val(),
                commoditySlidePic1: $('#commoditySlidePic1SrcAdd').val(),
                commoditySlidePic2: $('#commoditySlidePic2SrcAdd').val(),
                commoditySlidePic3: $('#commoditySlidePic3SrcAdd').val(),
                commodityExplain: $('#commodityExplainAdd').val(),
                expirationHour: $('#expirationHourAdd').val(),
                callPlan: $("#callPlanAdd").find("option:selected").val(),
                buy: $("#commodityBuyAdd").find("option:selected").val(),
                commodityContextDetails: commodityContextDetailsAddObj.contents().find("body").html()
            };
            $.ajax({
                url: "/SbdVoip/admin/commodity/commodityWebAdd",
                type: "POST",
                data: data,
                dataType: "json",
                contentType: "application/x-www-form-urlencoded",
                success: function (result) {
                    if (result.code !== 2000) {
                        toastr.error(result.message);
                        return
                    }
                    let addShow = $('#addShow');
                    addShow.modal('hide');
                    let table = $('#table')
                    table.bootstrapTable('destroy');
                    table.bootstrapTable(bootstrapTable);
                    toastr.success(result.message);
                }
            });
        });

        $("#updatePost").click(function () {
            const commodityContextDetailsUpdateObj = $("[textarea='commodityContextDetailsUpdate']")
            imagesLayEdit(commodityContextDetailsUpdateObj);
            const data = {
                id: $('#idUpdate').val(),
                commodityName: $('#commodityNameUpdate').val(),
                commodityRealPrice: $('#commodityRealPriceUpdate').val(),
                commodityMarketPrice: $('#commodityMarketPriceUpdate').val(),
                commodityStandard: $('#commodityStandardUpdate').val(),
                commodityStock: $('#commodityStockUpdate').val(),
                commodityClassifyLevel1: $("#commodityClassifyLevel1Update").find("option:selected").val(),
                commodityClassifyLevel2: $("#commodityClassifyLevel2Update").find("option:selected").val(),
                commoditySubarea: $("#commoditySubareaUpdate").find("option:selected").val(),
                commodityShowPic: $('#commodityShowPicSrcUpdate').val(),
                commoditySlidePic1: $('#commoditySlidePic1SrcUpdate').val(),
                commoditySlidePic2: $('#commoditySlidePic2SrcUpdate').val(),
                commoditySlidePic3: $('#commoditySlidePic3SrcUpdate').val(),
                commodityExplain: $('#commodityExplainUpdate').val(),
                expirationHour: $('#expirationHourUpdate').val(),
                commoditySales: $('#commoditySalesUpdate').val(),
                callPlan: $("#callPlanUpdate").find("option:selected").val(),
                buy: $("#commodityBuyUpdate").find("option:selected").val(),
                commodityContextDetails: commodityContextDetailsUpdateObj.contents().find("body").html()
            };
            $.ajax({
                url: "/SbdVoip/admin/commodity/commodityWebUpdate",
                type: "POST",
                data: data,
                dataType: "json",
                contentType: "application/x-www-form-urlencoded",
                success: function (result) {
                    if (result.code !== 2000) {
                        toastr.error(result.message);
                        return
                    }
                    const updateShow = $('#updateShow');
                    updateShow.modal('hide');
                    const table = $('#table');
                    table.bootstrapTable('destroy');
                    table.bootstrapTable(bootstrapTable);
                    toastr.success(result.message);
                }
            });
        });

        function imagesLayEdit(obj) {
            let img = obj.contents().find("body").find("img");
            if (img !== undefined) {
                img.each(function(){
                    $(this).css({width: '100%'})
                });
            }
        }

        // 富文本参数
        const layEditOption = {
            uploadImage: {
                url: '/SbdVoip/layfile/uploadFile1',
                accept: 'image',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: '10240'
            }
            , uploadVideo: {
                url: '/Attachment/LayUploadFile',
                accept: 'video',
                acceptMime: 'video/*',
                exts: 'mp4|flv|avi|rm|rmvb',
                size: '20480'
            }
            , calldel: {
                url: '/Attachment/DeleteFile'
            }
            , devmode: false
            , codeConfig: {
                hide: true,
                default: 'javascript'
            }
            , tool: [
                'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
                , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image', 'video', 'anchors'
                , '|', 'fullScreen'
            ]
            , height: '90%'
        };

        layui.use('layedit', function () {
            var layedit = layui.layedit;
            layedit.set(layEditOption);
            layedit.build('commodityContextDetailsAdd');
        });
    });
</script>
